import { useSelector, useDispatch } from "react-redux";
import { add, asyncRemove } from "./store/listSlice";
import { useState } from "react";

const Child = () => {
  const list = useSelector((state) => state.todolist.list);
  const dispatch = useDispatch();

  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const fn = () => {
    dispatch(add({ name: value, id: Date.now() }));
  };

  return (
    <>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={fn}>新增</button>
      <ul>
        {list.map((item) => (
          <li key={item.id}>
            {item.name} - {item.id} -{" "}
            <button onClick={() => dispatch(asyncRemove(item.id))}>删除</button>
          </li>
        ))}
      </ul>
    </>
  );
};

export default Child;
